<template>
  <el-tabs v-model="activeName" tab-position="top" type="card" @tab-click="tabClick">
    <el-tab-pane :disabled="!showLinux" :name="linuxName" :label="linuxName">
      <AgentOSView ref="linuxOSAgent" />
    </el-tab-pane>
    <el-tab-pane :disabled="!showWindows" :name="windowsName" :label="windowsName">
      <AgentOSView ref="windowsOSAgent" />
    </el-tab-pane>
    <el-tab-pane :disabled="!showMacos" :name="macosName" :label="macosName">
      <AgentOSView ref="macOSAgent" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import AgentOSView from './agents_os'
import { Version } from '@/api/api'

export default {
  components: { AgentOSView },
  data: function() {
    return {
      agent: '',
      linuxName: 'linux',
      windowsName: 'windows',
      macosName: 'macos',
      linuxVersion: '',
      windowsVersion: '',
      macosVersion: '',
      showLinux: false,
      showWindows: false,
      showMacos: false,
      activeName: '',
      hasActvie: false
    }
  },
  methods: {
    tabClick() {
      if (this.activeName.startsWith('windows')) {
        this.$refs.windowsOSAgent.setServerVersion(this.windowsVersion)
        this.$refs.windowsOSAgent.getAgents('windows', this.agent)
      } else if (this.activeName.startsWith('linux')) {
        this.$refs.linuxOSAgent.setServerVersion(this.linuxVersion)
        this.$refs.linuxOSAgent.getAgents('linux', this.agent)
      } else if (this.activeName.startsWith('macos')) {
        this.$refs.macOSAgent.setServerVersion(this.macosVersion)
        this.$refs.macOSAgent.getAgents('darwin', this.agent)
      }
    },
    getVersion(agent) {
      this.agent = agent
      var ts = this
      ts.linuxName = 'linux'
      ts.windowsName = 'windows'
      ts.macosName = 'macos'
      ts.showLinux = false
      ts.showWindows = false
      ts.showMacos = false
      ts.activeName = ''
      ts.hasActvie = false
      Version(this.agent + '_linux').then((res) => {
        if (res.code === 0 && res.data) {
          ts.linuxVersion = res.data
          ts.linuxName = 'linux - v' + res.data
          if (!ts.hasActvie) {
            ts.hasActvie = true
            ts.activeName = ts.linuxName
            ts.tabClick()
          }
          ts.showLinux = true
        } else {
          ts.showLinux = false
        }
      })
      Version(this.agent + '_darwin').then((res) => {
        if (res.code === 0 && res.data) {
          ts.macosVersion = res.data
          ts.macosName = 'macos - v' + res.data
          if (!ts.hasActvie) {
            ts.hasActvie = true
            ts.activeName = ts.macosName
            ts.tabClick()
          }
          ts.showMacos = true
        } else {
          ts.showMacos = false
        }
      })
      Version(this.agent + '_windows').then((res) => {
        if (res.code === 0 && res.data) {
          ts.windowsVersion = res.data
          ts.windowsName = 'windows - v' + res.data
          if (!ts.hasActvie) {
            ts.hasActvie = true
            ts.activeName = ts.windowsName
            ts.tabClick()
          }
          ts.showWindows = true
        } else {
          ts.showWindows = false
        }
      })
    }
  }
}
</script>
